<template>
  <ZZDialog class="login-container" title="登录">
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
      <el-form-item prop="ipAddress">
        <el-input v-model="loginForm.ipAddress" placeholder="请输入IP地址" :prefix-icon="Monitor" />
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          :prefix-icon="Lock"
          show-password
        />
      </el-form-item>
      <el-form-item prop="remember" class="remember-checkbox">
        <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
        <el-link type="primary" :underline="false" class="forgot-password">忘记密码?</el-link>
      </el-form-item>
      <el-form-item>
        <div class="button-group">
          <el-button type="primary" :loading="loading" class="login-button" @click="handleLogin">登录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </ZZDialog>
</template>

<script setup>
import ZZDialog from '@/common/ZZDialog.vue';

import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { User, Lock, Monitor } from '@element-plus/icons-vue';

// 登录表单数据
const loginForm = reactive({
  username: '',
  ipAddress: '',
  password: '',
  remember: false
});

// 表单引用
const loginFormRef = ref(null);

// 加载状态
const loading = ref(false);

// 表单验证规则
const loginRules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  ipAddress: [
    {
      required: true,
      message: '请输入IP地址',
      trigger: 'blur'
    },
    {
      pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/,
      message: '请输入有效的IP地址格式',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 20,
      message: '密码长度应在6-20位之间',
      trigger: 'blur'
    }
  ]
};

// 处理登录
const handleLogin = async () => {
  try {
    // 表单验证
    await loginFormRef.value.validate();

    // 设置加载状态
    loading.value = true;

    // 模拟登录请求
    setTimeout(() => {
      // 这里应该是实际的登录API调用
      console.log('登录请求参数:', loginForm);

      // 模拟登录成功
      ElMessage.success('登录成功');

      // 可以在这里添加路由跳转逻辑
      // router.push('/home')

      // 重置加载状态
      loading.value = false;
    }, 1500);
  } catch (error) {
    console.error('登录验证失败:', error);
    ElMessage.error('请检查输入信息');
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  position: absolute;
  /* 垂直方向居中起点 */
  top: 50%;
  /* 水平方向居中起点 */
  left: 50%;
  /* 调整自身位置到正中心 */
  transform: translate(-50%, -50%);
}

.login-form {
  padding: 20px;
}

.remember-checkbox :deep(.el-form-item__content) {
  justify-content: space-between;
}

.forgot-password {
  font-size: 14px;
}

.button-group {
  display: flex;
  width: 100%;
  gap: 10px;
}

.login-button {
  flex: 1;
}

:deep(.el-form-item) {
  margin-bottom: 14px;
}
</style>
